<template>
	<view @click='isLogin'>
		<view class='user'>
			<u--image :showLoading="true" :src="userInfo.avatar" width="80px" height="80px"></u--image>
			<text>{{ userInfo.username }}</text>
			<u-image @click="$u.route('pages/me/userinfo')" width="35rpx" height="35rpx" style="margin-right: 15rpx;" src="/static/home/right.png"></u-image>
		</view>
		<view class='user-icon'>
			<view class='icon-item' @click='$u.route("/pages/me/follow")'>
				<u--image src='../../static/my/my7.png' width="60rpx" height="56rpx"></u--image>
				<text>关注</text>
			</view>
			<view class='icon-item'>
				<u--image src='../../static/my/my13.png' width="60rpx" height="56rpx"></u--image>
				<text>粉丝</text>
			</view>
			<view class='icon-item'>
				<u--image src='../../static/my/my9.png' width="60rpx" height="56rpx"></u--image>
				<text>获赞</text>
			</view>
			<view class='icon-item'>
				<u--image src='../../static/my/my8.png' width="60rpx" height="56rpx"></u--image>
				<text>收藏</text>
			</view>
		</view>
		<view @click='$u.route("/pages/me/circle")'>
			圈子　
		</view>
		<view @click='$u.route("/pages/me/config")'>设置</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default{
	onShow(){
		this.isLogin();
	},
	computed:{
		...mapState({
			status:state=>state.user.status,
			userInfo:state=>state.user.userInfo
		})
	},
	methods:{
		isLogin(){
			if( this.status ){
				//正常访问
				return false;
			}else{
				uni.redirectTo({
					url:'../login/login'
				})
			}
		}
	}
}
</script>

<style scoped>
.user{
	padding:15rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.user-icon{
	margin-top:30rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.icon-item{
	display: flex;
	flex-direction: column;
}
.icon-item text{
	padding:15rpx 0;
}
</style>